本阶段学习目标
从组件库开发进入业务应用阶段,将自研组件库、CLI 工具和桌面端能力整合到知识付费管理端的实际开发中。本阶段核心不是重复做页面开发的基础训练,而是学习如何将技术能力应用到具体业务场景中。
业务开发遵循的流程:需求分析 -> 设计 -> 开发 -> 服务端对接。由于前面已经走过了完整流程,本阶段将简化前期步骤,直接切入开发。
知识付费管理端核心业务
管理端的业务围绕两大核心展开:
1. 内容管理
首页端发布的项目和内容需要管理端进行统一管理。课程是最核心的内容类型,包含:
- 课程列表(分类管理:推荐好课、每日一课、精品微课等)
- 课程详情(课程介绍、章节目录、学员评价)
- 图文内容(可使用 Markdown 快速生成)
- 视频和音频资源上传
- 内容评论与问答管理
2. 用户管理
用户按角色划分为:
| 角色 | 说明 |
|---|---|
| 管理员/运营 | 管理端用户,负责内容发布和管理 |
| 创作者 | 内容生产者,可上传和管理自己的课程 |
| 监管用户 | 负责内容审核 |
| 普通用户 | 首页端用户,消费内容 |
3. 扩展业务
系统管理、评论管理、第三方服务登录鉴权、交易管理等,都是上述两大核心业务的延伸。
开发顺序规划
按照难度递进的原则安排开发顺序:
- 登录注册 -- 最基础的业务入口
- 首页/Dashboard -- 管理端概览页面
- 用户管理 -- 包含会员管理、权限划分
- 内容管理 -- 最复杂的模块,涉及富文本、资源上传、评论系统
项目初始化
使用自研 CLI 工具创建项目:
npm init vue-template@latest
bash
配置选项:
- 项目名称:
pk-admin-vue3 - 选中:Unplugin Vue Router、Unplugin Vue Layouts
- 选中:Mock 接口
- 选中:UnoCSS
- CDN 加速:Yes
- Electron:No
- PWA:Yes(可选)
初始化完成后安装依赖并启动:
pnpm install
pnpm dev
bash
如果遇到图标加载异常,通常是浏览器缓存问题,使用无痕模式访问即可验证。
数据库核心表结构
知识付费系统涉及的核心数据表及其关系:
| 数据表 | 说明 | 关联关系 |
|---|---|---|
| 用户表 | 基础用户信息 | 扩展可对接微信、支付宝等第三方信息 |
| 课程表 (courses) | 课程基础信息 | 关联标签、资源、内容 |
| 课程标签 (course_tags) | 课程分类标签 | 多对多关联课程 |
| 课程附件 (course_attachments) | 上传的资源文件 | 属于某个课程 |
| 课程内容 (course_contents) | 图文内容和章节内容 | 通过 PID 区分课程级和章节级内容 |
| 课程评论 (course_comments) | 对课程的评价 | 属于某个课程 |
| 内容评论 (content_comments) | 对章节的问题和讨论 | 属于某个章节内容 |
| 评论信息 (comments) | 统一存储所有类型评论 | course_comments 和 content_comments 的汇总表 |
内容管理的关键设计:不同分类的内容(推荐好课、每日一课等)不需要各自独立的管理面板,在数据库中通过一个 type 字段区分即可。课程内容表通过 PID 字段实现课程级和章节级的层级关系,这是一种典型的自引用设计模式。
↑